<template>
  <div>
    <div></div>
    <mt-header fixed title="团体赛报名">
      <mt-button icon="back" @click='$router.back(-1)' slot="left"></mt-button>
    </mt-header>
    <div style="height:40px;"></div>
    <div class="top-title"><i class="gray">比赛名称: </i>2019长沙岳麓区第N届羽毛球邀请赛</div>
    <div class="top-title"><i class="gray">比赛组别：</i>青年组 - 20至30岁</div>
    <step current=1 :stepArr="stepArr"></step> 
    <div v-show="!loading">
      <div class="cf m10"><span class="fl f16 fwb mt5">选择俱乐部</span></div>
      <div v-if="clubList.length > 0"> 
          <mt-radio title="" v-model="value" align="right" :options="clubList"></mt-radio>
      </div>
      <div v-else style="background: #fff; padding:50px 0;  text-align: center; margin-top: 20px; border:1px solid #ddd; border-width:.5px 0;" >
          <span style="color:#999; font-size: 18px;">你还没有创建的俱乐部，</span><mt-button size='small' @click="popupVisible=true" type="danger">创建俱乐部</mt-button>
      </div>
      
      <div style="display: flex; margin: 20px 10px;"><mt-button style="flex:1;" @click='$router.push("/enroll/group/step2")'  type="primary">下一步</mt-button></div> 
    </div> 
    <div v-show="loading" class="loading-center" ref="loadBox"><mt-spinner :type="3" color="#999" :size="20"></mt-spinner>加载中…</div> 

    <mt-popup v-model="popupVisible" style="width: 80%;">
      <div class="p15">
        <h3 class="f16 p10">创建俱乐部</h3>
        <mt-field label="" placeholder="请输入俱乐部名称" v-model="clubName"></mt-field>
        <div style="display: flex; margin:20px 10px 0;"><mt-button style="flex:1;" @click="popupVisible = false" type="danger">创建</mt-button></div> 
      </div>
    </mt-popup>

  </div>
</template>

<script>
import step from '@/components/step'
export default {
  components:{
    step
  }, 
  data () {
    return {
      stepArr:['选择俱乐部','队伍信息','选择队员','报名预览','支付完成'],
      value:"1",
      clubList:[],
      loading:false,
      popupVisible:false,
      clubName:''
    }
  },
  mounted(){
     this.getList();     
    this.$refs.loadBox.style.height = document.documentElement.clientHeight - 130 + "px"; 
  },
  methods:{
    getList(type){
      this.loading = true;

      this.loading = false;
      var list = [
        { 
          "id":1,
          "imgUrl":"",
          "members":120,
          "clueName":"天心区俱乐部", 
          "description":"天心区俱乐部"
        }
      ];
      var arr = [];
      for (var i = 0; i < list.length; i++) {
        var item = list[i]; 
        arr.push({
          value:item["id"] + "",
          label:item["clueName"]
        });
      }
      this.clubList = arr;

      /*setTimeout(()=>{
        this.axios.get(this._site + 'club/list')
        .then(response => {
          //设置拉拽加载结束       
          var res = response.data;
          this.loading = false;
          if(res.status == 1 && res.data){
            var list = []; 
            for (var i = 0; i < res.data.length; i++) {
              var item = res.data[i]; 
              list.push({
                value:item["id"] + "",
                label:item["clueName"]
              });
            }
            this.clubList = list;
          }else{
            this.$toast({message: '加载失败'});
          }
        }).catch(error => {
          //设置拉拽加载结束
          this.$toast({message: '加载失败'});
        });
      },500)*/
    }
  }
}
</script>
